<style>
	#sharemodal{display: block; width: 100%; margin: 0; left: 0; right: 0; top: 20%;}
	#sharemodal .banner{width: 90%; height: 5rem; margin: 0 auto; position: relative; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;}
	#sharemodal .banner img{width: 100%; min-height: 5rem; max-height: 10rem; position: absolute; bottom: 0; left: 0;}
	#sharemodal .container{ width: 90%; margin: 0 auto; padding: 0.5rem 0.8rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;}
	#sharemodal .redpacket{background-color: #fff; margin-bottom: 0.5rem; border-radius: 0.3rem; padding: 0.4rem 0.8rem;}
	#sharemodal .redpacket .redpacket-info{height: 1.4rem; line-height: 1.4rem;}
	#sharemodal .redpacket .redpacket-info .redpacket-title{font-size: 0.8rem;}
	#sharemodal .redpacket .price span{font-size: 1.3rem;}
	#sharemodal .redpacket .circle-container{position: relative;}
	#sharemodal .redpacket .circle-container .circle{display: block; width: 0.8rem; height: 0.8rem; position: absolute; border-radius: 0.8rem; top: -0.4rem; z-index: 20;}
	#sharemodal .redpacket .circle-container .circle-left{left: -1.2rem;}
	#sharemodal .redpacket .circle-container .circle-right{right: -1.2rem;}
	#sharemodal .redpacket-limit{height: 1.4rem; line-height: 1.4rem; font-size: 0.6rem; color: #666;}
	#sharemodal .go-home a{display: block; padding: 0.3rem 0.5rem; border-radius: 0.2rem; font-size: 0.8rem; max-width: 50%; margin: 0 auto;}
	#sharemodal .icon-close{display: inline-block; font-size: 1rem; width: 1.8rem; height: 1.8rem; text-align: center; line-height: 2.0rem; color: #fff; background: rgba(0,0,0,.7); border-radius: 100%; margin-top: 1rem;}
</style>
<div class="modal modal-no-buttons modal-in" id="sharemodal"></div>
<script type="text/html" id="tpl-superredpacket">
	<div class="banner" style="background-color: <{d.page.text.backgroundColor}>;">
		<img src="<{d.page.image}>" alt=""/>
	</div>
	<div class="container" style="background-color: <{d.page.text.backgroundColor}>;">
		<{# for(var i = 0, len = d.redpackets.length; i < len; i++){ }>
			<div class="redpacket">
				<div class="redpacket-info row" style="color: <{d.page.text.color}>;">
					<div class="col-75 text-left">
						<span class="redpacket-title"><{d.redpackets[i].title}></span>
					</div>
					<div class="col-25 price text-right">
						￥<span><{d.redpackets[i].discount}></span>
					</div>
				</div>
				<div class="circle-container">
					<span class="circle circle-left" style="background-color: <{d.page.text.backgroundColor}>;"></span>
					<span class="circle circle-right" style="background-color: <{d.page.text.backgroundColor}>;"></span>
				</div>
				<div class="redpacket-limit row">
					<div class="col-75 use-days-limit text-left"><{d.redpackets[i].use_days_limit_text}></div>
					<div class="col-25 use-condition text-right">满<{d.redpackets[i].condition}>可用</div>
				</div>
			</div>
		<{# } }>
		<div class="go-home"><a href="javascript:;" class="js-close-modal" data-modal="#sharemodal" style="color: <{d.page.button.color}>; background-color:<{d.page.button.backgroundColor}>;">进入首页</a></div>
	</div>
	<span class="icon icon-close js-close-modal" data-modal="#sharemodal"></span>
</script>
<script>
	require(['laytpl'], function(laytpl) {
		$.post("{php echo imurl('superRedpacket/index');}", function(result) {
			var result = $.parseJSON(result);
			if(result.message.errno == -1) {
				return false;
			}
			var gettpl = $('#tpl-superredpacket').html();
			laytpl(gettpl).render(result.message.message, function(html) {
				var length = result.message.message.redpackets.length;
				if(length == 3) {
					$('#sharemodal').css({top: '10%'});
				}
				$('#sharemodal').append(html);
				return;
			});
		});
	});
</script>
